<template>
    <div>
        <!-- 轮播图 -->
        <mt-swipe :auto="4000">
            <!--组件中v-for必须用key  -->
            <mt-swipe-item v-for="item in lbt" :key="item.id">
                <img :src="item.img" alt="">
            </mt-swipe-item>
            <!-- <img :src="item" alt=""> -->
            
        </mt-swipe>
        <h3>HomeContainer</h3>
        
    </div>
</template>
<script>
import { Toast } from 'mint-ui'
export default{
    data(){
        return{
            lbt:[]//轮播图
        };
    },
    created(){
        this.getLbt();
    },
    methods:{
        getLbt(){
            this.$http.get('http://www.liulongbin.top:3005/api/getlunbo').then(result=>{
                //console.log(result.body);
                //成功
                if(result.body.status === 0){
                    this.lbt = result.body.message;
                
                }
                //失败
                else{
                    Toast('轮播图加载失败')
                }
            
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.mint-swipe{
    height: 200px;
    //第一种
    // .mint-swipe-item:nth-child(1){
    //     background-color: red ; 
    // }
    // .mint-swipe-item:nth-child(2){
    //     background-color: yellow ; 
    // }
    // .mint-swipe-item:nth-child(3){
    //     background-color: blueviolet;
    // }
    //scss语法 &符号使用 形成嵌套
    .mint-swipe-item{
        &:nth-child(1){
            background-color: cyan;
            border-radius: 15px;
        }
        &:nth-child(2){
         background-color: yellow ; 
        }
        &:nth-child(3){
         background-color: blueviolet ; 
        }
        img{
            width: 100% ;
            height: 100% ;
        }
    }
}
</style>